<template>
    <div class="illustrate">
        <h2 class="my-big-font">商品说明文档</h2>
        <table style="width: 100%;margin-top:20px;">
            <tr class="titleTr">
                <td width='180px'>名称</td>
                <td align="center">内容</td>
                <td width='120px'>操作</td>
            </tr>
            <tr v-for="p,i of illustrateData" :key="i">
                <td>{{p.explainsName}}</td>
                <td>{{p.explains}}</td>
                <td style="color:rgba(107, 90, 253, 1);" @click="goEdit(p.id)">编辑</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            illustrateData:[
               {
                    id:'',
                    explainsName:'',
                    explains:''
                }
            ]
        }
    },
    mounted(){
        this.getIllustrateData()
    },
    methods:{
        //跳转至编辑页
        goEdit(id){
            this.$router.push({path:"/index/edit",query:{id:id}})
        },
        //获取说明文档数据
        getIllustrateData(){
            this.axios.post('/recharge/sys/rightsexplain/getAllList').then(res=>{
                //console.log(res.data.data)
                this.illustrateData=res.data.data
            })
        }
    }
}
</script>

<style scoped>
.illustrate{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height: calc(100vh - 96px);
}
.illustrate h2{
    padding-top: 0;
}
/* 表格 */
table .titleTr{
    background:rgba(246, 246, 246, 1);
}
table tr{
    border: .5px solid #eee;
}
table td{
    padding: 10px 5px;
    text-align: center;
}
</style>